{extend name="admin@public/basic" /}
{block name="style"}{/block}
<!-- <link rel="stylesheet" href="__STATIC__/css/admin/public.css" media="all"/> -->

{block name="cotent"}
<link rel="stylesheet" href="__STATIC__/css/admin/public.css" media="all"/>
<style>
    .tip{
        color: red;
    }
    .gray-tip {
        font-family: sans-serif !important;
        font-weight: 10 !important;
        margin-top: 5px !important;
        color: #A8A8A8 !important;
    }
    .layui-table td, .layui-table th {
        padding: 9px 4px;
    }
    .newupload{
        width: 100px !important;
        height: 40px !important;
        background: url(__STATIC__/image/admin/nopic.png) no-repeat;
        background-size: 100% 100%;
        border:none;
        overflow: hidden;
        cursor: pointer;
        position: relative;
        text-align: center;
    }
    .newInput{
        width: 80px !important;
    }
    .webuploader-container input {
        width: 100%;
        height: 100%;
    }

    .webuploader-pick {
        width: 100%;
        height: 100%;
        border: 1px solid blue;
    }
    .thumbBox {
        position: relative;
    }
    .thumbBox input{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        cursor: pointer;
    }
</style>
<form id="form" class="layui-form" style="width:80%;">
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">规格</li>
        </ul>
        <div class="layui-tab-content ">
            <!--规格-->
            <div class="layui-tab-item layui-show">
                <div class="layui-form-item layui-row layui-col-xs12">
                    <label class="layui-form-label">商品规格:</label>
                    <div class="layui-col-md12" style="padding-left: 34px">
                        <button class="layui-btn layui-btn-primary" type="button" onclick="addScale()">添加规格 </button><label class="tip">请先选择商品</label><label class="gray-tip" style="line-height:40px;">推荐尺寸:商品规格图片:140px*140px 【积分、价格最多一位小数】</label>
                        <table class="layui-table" lay-skin="nob" id="table-head">
                            <thead>
                            <tr id="tr1">
                                <th data-name="norms_pic">图片</th>
                                <th data-name="norms_size">尺寸</th>
                                <th data-name="norms_kc">库存</th>
                                <th data-name="norms_xl">销量</th>
                                <th data-name="norms_yj">原价</th>
                                <th data-name="norms_sj">售价</th>
                                <th data-name="norms_yjf">用户返积分</th>
                                <th data-name="norms_tjf">推荐人返积分</th>
                                <th data-name="norms_pjf">评价返积分</th>
                                <th >操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                        <label class='tip'>所有积分在确认收货或者核销提货码时返</label>
                    </div>
                </div>

            </div>
        </div>
    </div>


    <div class="layui-form-item layui-row layui-col-xs12">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-sm" lay-submit="" id="addUser">确定</button>
            <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">取消</button>
        </div>
    </div>
</div>
</form>

{/block}

{block name="script"}
<script type="text/javascript" src="__STATIC__/layuicms/layui/layui.js"></script>
<script type="text/javascript" src="__STATIC__/plugs/webuploader.min.js"></script>
<script>
addScale();

layui.use(['form','layer','layedit','upload','element'],function(){
    var form = layui.form
        layer = parent.layer === undefined ? layui.layer : top.layer,
        laypage = layui.laypage,
        upload = layui.upload,
        layedit = layui.layedit,
        element = layui.element,
        $ = layui.jquery;

    /**
     * 新增以及编辑后台用户
     */
    $("#addUser").click(function () {
        layedit.sync(editIndex);
        layedit.sync(editIndex2);
        var url = '{if empty($data)}{:url("$thisClass/add")}{else/}{:url("$thisClass/edit")}{/if}';
        var data = {
            id: $(".id").val(),
            name: $(".name").val(),
            type: $(".type").val(),
            status: $('input[name="status"]:checked').val(),
            image: $('input[name="image"]').val(),
            desc: $(".desc").val(),
            meal_content: $("#meal_content").val(),
            server_content: $("#server_content").val(),
        };
        $.ajax({
            url: url,
            method:"POST",
            data: data,
            success:function(res){
                console.log(res);
                if(res.code ==1){
                    layer.msg(res.msg,{icon: 1})
                    setTimeout(function(){
                        //刷新父页面
                        parent.location.reload();
                    },500);

                }else{
                    layer.msg(res.msg);
                }
            }   
        })
        return false;
    });

    form.render();

})

// 添加规格
function addScale() {
    var tdnode = $("#tr1").find("th");
    console.log(tdnode[0].dataset.name);
    var index = $("#table-head").find("tbody").find("tr").length;
    console.log(index);
    var html='';
    if (tdnode.length-1 > 0) {
        html += "<tr><td style='position:relative;overflow:hidden'><input type='hidden' id='data_photo" + index + "' name='" + tdnode[0].dataset.name + "[]' />"
                        +"<div id='fileList" + index + "' class='uploader-list' style='float:right'></div>"
                        +"<div id='imgPicker" + index + "' style='opacity: 0.0;margin-left: 10px;position:absolute;top:0;left:0;width:100%;height:100%'>选择图片</div>"
                        +"<img id='img_data" + index + "' style='float:left;width:100px;height: 50px;' src='__STATIC__/image/admin/nopic.png'/></td>";
   
        for (var i = 1; i < tdnode.length - 1; i++) {
            console.log(tdnode[i].style.display)
            if (tdnode[i].style.display == 'none') {
                continue;
            }
            if (tdnode[i].dataset.val >= 0) {
                html += "<td><input  value='" + tdnode[i].dataset.val + "' name='" + tdnode[i].dataset.name + "[]' type='text' class='layui-input newInput' data-name='" + tdnode[i].dataset.name +"' /></td>";
            } else {
                html += "<td><input  value='' name='" + tdnode[i].dataset.name + "[]' type='text' class='layui-input newInput' data-name='" + tdnode[i].dataset.name +"' /></td>";
            }

        }
        html += "<td><button type='button' class='layui-btn layui-btn-sm' onclick='del_scale(this)'>删除</button></td>";
        html += "</tr>";
        $("#table-head").find("tbody").append(html);
    }
    var $list = $('#fileList' + index);
    //上传图片,初始化WebUploader
    var uploader = WebUploader.create({
        auto: true, // 选完文件后，是否自动上传。
        swf: '/static/admin/webupload/Uploader.swf', // swf文件路径
        server: "{:url('Upload/uploadImage')}", // 文件接收服务端。
        duplicate: true, // 重复上传图片，true为可重复false为不可重复
        pick: '#imgPicker' + index, // 选择文件的按钮。可选。

        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/jpg,image/jpeg,image/png'
        },
        'onUploadSuccess': function (file, data, response) {

            var src = "{:config('SN_SRC')}" + data;
            $("#data_photo" + index).val(data);
            $("#img_data" + index).attr('src', src).show();
        }
    });

    uploader.on('fileQueued', function (file) {

    });

    // 文件上传成功
    uploader.on('uploadSuccess', function (file) {
        //$('#' + file.id).find('p.state').text('上传成功！');
    });

    // 文件上传失败，显示上传出错。
    uploader.on('uploadError', function (file) {
        //$('#' + file.id).find('p.state').text('上传出错!');
    });
}
// 删除规格
function del_scale(obj) {
    var tr = obj.parentNode.parentNode;
    var tbody = tr.parentNode;
    var index = $("#table-head").find("tbody").find("tr").length;
    console.log(index);
    if(index>1){
        tbody.removeChild(tr);
    }
    
}

    
    
</script>
{/block}
